<template>
  <div class="container">
    <el-card>
      <div class="btn-class">
        <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-alert type="error" :closable="false" title="说明：目前支持学科和关键字条件筛选"></el-alert>
          </el-col>
          <el-col></el-col>
          <el-col :span="2.5">
            <el-button
              @click="$router.push('new')"
              type="success"
              icon="el-icon-edit"
              size="small"
            >
              新增试题
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-form ref="form" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select @change="changeSubject" v-model="form.subjectID">
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID">
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType">
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty">
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction">
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @change="changeCity"
                v-model="form.province"
                style="width: 48%; margin-right: 2%"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>

              <el-select v-model="form.city" style="width: 50%">
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clearForm" size="small" type="plain"
                >清除</el-button
              >
              <el-button size="small" @click="search" type="primary"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom: 15px"
        type="info"
        :closable="false"
        show-icon
      ></el-alert>

      <el-table v-loading="loading" :data="questions" style="width: 100%">
        <el-table-column width="120px" label="试题编号" prop="number">
        </el-table-column>
        <el-table-column label="学科" prop="subject"> </el-table-column>
        <el-table-column label="目录" prop="catalog"> </el-table-column>
        <el-table-column label="题型" prop="questionType">
          <template #default="{ row }">
            {{
              questionType.find((item) => item.value === +row.questionType)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px" prop="question">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column width="180" label="录入时间" prop="addDate">
          <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template #default="{ row }">
            {{
              difficulty.find((item) => item.value === +row.difficulty).label
            }}
          </template>
        </el-table-column>

        <el-table-column label="录入人" prop="creator"> </el-table-column>
        <el-table-column width="180px" label="操作">
          <template #default="{ row }">
            <el-button
              plain
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              title="预览"
              @click="previewQes(row)"
            >
            </el-button>
            <el-button
              plain
              type="success"
              size="small"
              circle
              icon="el-icon-edit"
              title="修改"
              @click="$router.push('new')"
            ></el-button>
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
              @click="del(row)"
            ></el-button>
            <el-button
              plain
              type="warning"
              size="small"
              circle
              icon="el-icon-check"
              @click="clickAdd(row.id)"
              title="加入精选"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px; text-align: right"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="form.pagesize"
        :current-page="form.page"
        @current-change="handlePageChange"
        :page-sizes="[1, 3, 5, 7, 10]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>

    <!-- 对话框 -->
    <!-- 将基本题列表信息传给子组件 -->
    <QuestionsPreview
      :questionInfo="questionInfo"
      :showDialog.sync="showDialog"
    ></QuestionsPreview>
  </div>
</template>

<script>
import { simple as subjectsSimple } from '@/api/hmmm/subjects.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import { simple as directoryList } from '@/api/hmmm/directorys.js'
import { simple as userList } from '@/api/base/users.js'
import { list as questionList, remove as delQuestion, choiceAdd } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple as tagsList } from '@/api/hmmm/tags.js'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys.js'
export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      loading: false,
      showDialog: false,
      questionInfo: {},
      difficulty,
      questionType,
      directionOptions: direction,
      diffOptions: difficulty,
      questionTypeOptions: questionType,
      total: 0,
      questions: [],
      form: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      },
      subjectOptions: [],
      tagOptions: [],
      cityOptions: getCity(),
      areaOptions: [],
      userOptions: [],
      directoryOptions: []
    }
  },
  methods: {
    // 点击预览，打开对话框，赋值
    previewQes (data) {
      // console.log(data)
      this.showDialog = true
      this.questionInfo = data
    },
    // 加入精选
    clickAdd (id) {
      // console.log(id)
      this.$confirm('确定添加？', '温馨提示').then(async () => {
        const res = await choiceAdd({ id, choiceState: 1 })
        console.log(res)
        this.$message('添加成功')
        this.getLists()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 搜索
    search () {
      this.form.page = 1
      this.getLists()
    },
    // 修改省份，再渲染城市
    changeCity (val) {
      this.form.city = null
      this.areaOptions = getArea(val)
    },
    // 清除表单
    clearForm () {
      this.form = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      }
    },
    // 选择学科渲染目录和标签
    async changeSubject (id) {
      this.form.catalogID = null
      this.form.tags = null
      console.log(id)
      if (id) {
        const { data } = await directoryList({ id })
        console.log(data)
        // 更改学科，获取二级目录

        this.directoryOptions = data
        // 获取标签
        const { data: tagArr } = await tagsList({ id })
        this.tagOptions = tagArr
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    // 修改当前页数
    handlePageChange (val) {
      // console.log(val)
      this.form.page = val
      this.getLists()
    },
    // 修改一页显示多少条
    handleSizeChange (val) {
      // console.log(val)
      this.form.pagesize = val
      this.form.page = 1
      this.getLists()
    },
    // 删除
    del (data) {
      // console.log(id)
      this.$confirm('确认删除', '温馨提示').then(async () => {
        const res = await delQuestion(data)
        console.log(res)
        this.$message('删除成功')
        this.getLists()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 获取列表
    async getLists () {
      this.loading = true
      const { data: { items, counts } } = await questionList(this.form)
      console.log(items)
      this.questions = items
      this.total = counts
      this.loading = false
    }
  },
  async created () {
    // 获取学科简单信息
    const { data } = await subjectsSimple()
    // console.log(data)
    this.subjectOptions = data
    this.getLists()
    const { data: userArr } = await userList()
    // console.log(data)
    this.userOptions = userArr
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px 0;
  padding: 0 10px;
}
.btn-class {
  margin-bottom: 15px;
}
</style>
